//企业职位
import React, { Component } from 'react';
//加载action
import { ShowPostionCollect } from '../../../actions/postionCollectAction';
import { SendPostion_colAction } from '../../../actions/postionSendAction';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

import {
    View,
    Text,
    ListView,
    RefreshControl,                         //刷新小组件
    ActivityIndicator                       //底部刷新小组件
} from 'react-native';

import Collect_list from './collect_list';
var Dimensions = require('Dimensions');
var width = Dimensions.get('window').width;
var height = Dimensions.get('window').height;



const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => { r1 !== r2 } });//listView 数据判断方式
class Collect_body extends Component {

    constructor(props) {
        super(props);
        this.state = {
            uploading: true, //下拉刷新按钮状态 (初始化加载时处在loading状态)
            dwloading: false, //上拉刷新按钮状态
            reload: 0,
        }
        this.isFirst = true                         //页面第一次加载
    }

    //加载后渲染页面
    componentDidMount() {
        const { actions } = this.props;
        actions.ShowPostionCollect({ page: 1 }); //初始化查询
    }

    render() {
        //获取用户列表数据及是否等待状态
        const { postionCollectList, isloading } = this.props.postionCollect.data;
        //创建listView数据源
        const dataSource = ds.cloneWithRows(postionCollectList);
        return (
            <View style={{ flex: 1 }}>
                <ListView
                    refreshControl={
                        <RefreshControl
                            refreshing={this.state.uploading && this.props.postionCollect.isloading}
                            onRefresh={this._onRefresh.bind(this)}
                        />
                    }
                    enableEmptySections={true}
                    dataSource={dataSource}
                    renderRow={this.renderRow.bind(this)}
                    onEndReachedThreshold={1}//滚动临界值（到达后执行onEndReached）
                    onEndReached={this.onEndReached.bind(this)}
                    renderFooter={this.renderFooter.bind(this)}
                />
            </View>
        );
    }

    //刷新隐藏按钮
    componentDidUpdate() {
        if (this.state.uploading && !this.props.postionCollect.isloading) {
            this.setState({
                uploading: false //下拉刷新按钮状态：隐藏
            })
        }
        if (this.state.dwloading && !this.props.postionCollect.isloading) {
            this.setState({
                dwloading: false //上拉刷新按钮状态：隐藏
            })
        }
    }

    //下拉刷新开始
    _onRefresh() {
        this.props.postionCollect.isloading = true //设置为加载状态
        const { actions } = this.props;
        actions.ShowPostionCollect({ page: 1 });
        this.setState({
            uploading: true //下拉刷新按钮状态：显示
        });
    }

    onEndReached() {
        if (!this.isFirst && !this.props.postionCollect.isloading) {
            const { postionCollectList, page, pages } = this.props.postionCollect.data;
            if (page != pages) {//不等于最后一页加载
                const { actions } = this.props;
                actions.ShowPostionCollect({ page: page + 1 });
                this.props.postionCollect.isloading = true;
                this.setState({
                    dwloading: true //下拉刷新按钮状态 显示
                })
            }
        } else {
            this.isFirst = false;
        }
    }


    renderFooter() {
        if (!this.props.postionCollect.ret) {
            //console.log("请求失败");
        }
        if (this.state.dwloading) {
            return (<View style={{ marginVertical: 10 }}>
                <ActivityIndicator
                    animating={true}
                    style={{ height: 10, alignItems: 'center', justifyContent: 'center', padding: 1, }}
                    size="small" />
            </View>);
        }
        if (this.state.uploading) {
            return (<View style={{ marginVertical: 10, height: 100, alignItems: 'center', justifyContent: 'flex-end' }}>
                <Text>玩命加载ing</Text>
            </View>);
        }
        return (<View style={{ marginVertical: 10 }}>
        </View>);
    }

    //list子项加载方法
    renderRow(rowData, rowID) {
        return (
            <Collect_list
                deleteRow={this._deleteRow(this)}
                postions={rowData}
                postion={rowData.postion}
                company={rowData.postion.company}
                domains={rowData.postion.company.domains}
                SendPostion_colAction={this.props.actions}
                navigation={this.props.navigation}
            />
        )
    }

    _deleteRow(box) {
        var This = box;
        return function (id) {
            var count;
            var list = This.props.postionCollect.data.postionCollectList
            for (let i = 0; i < list.length; i++) {
                if (list[i].collectId == id) {
                    count = i;
                }
            }
            This.props.postionCollect.data.postionCollectList.splice(count, 1);
            This.setState({ reload: This.state.reload++ });
        }
    }
}

//组合action
var actions = {
    ShowPostionCollect,
    SendPostion_colAction,
}
//连接state到props
const mapStateToProps = state => {
    return {
        postionCollect: state.ShowPostionCollect
    }
}
//连接action
const mapDispatchToProps = (dispatch) => {
    return {
        actions: bindActionCreators(actions, dispatch)
    }
}
//导出组合好的组件(组合后状态改变重新渲染组合组件的页面)
export default connect(
    mapStateToProps, mapDispatchToProps
)(Collect_body);